<template>
    <div class="page-container">
      <h2 class="page-title">站点留资管理</h2>
      <DynamicTable 
        :columns-api="getColumns" 
        :data-api="getData" 
        page-name="站点留资"
      />
    </div>
  </template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import http from "../libs/http";
import { useRoute } from 'vue-router';

import DynamicTable from '@/components/DynamicTable.vue'
// 模拟API请求 - 获取表头
const getColumns = () => {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve({

        columns: [
          { prop: 'id', label: 'ID', },
          { prop: 'name', label: '姓名', filterType: 'text' },
          { prop: 'phone', label: '电话', filterType: 'text' },
          { prop: 'site', label: '站点' },
          { prop: 'source', label: '来源渠道', filterType: 'select', options: [
            { label: '微信', value: 'wechat' },
            { label: '抖音', value: 'douyin' },
            { label: '官网', value: 'official' }
          ]},
          { prop: 'createTime', label: '创建时间', },
          { prop: 'status', label: '状态', filterType: 'select', options: [
            { label: '未处理', value: 0 },
            { label: '已联系', value: 1 },
            { label: '已转化', value: 2 }
          ]},
          { prop: 'note', label: '备注' }
        ]

        
      })
    }, 300)
  })
}


const route = useRoute();

// 模拟API请求 - 获取数据
const getData = (params) => {
  return new Promise(resolve => {
    setTimeout(() => {
      const mockData = []
      for (let i = 1; i <= 50; i++) {
        mockData.push({
          id: 10000 + i,
          name: `用户${i}`,
          phone: `1380013800${i.toString().padStart(2, '0')}`,
          site: `站点${(i % 5) + 1}`,
          source: ['wechat', 'douyin', 'official'][i % 3],
          createTime: `2023-06-${(i % 28) + 1}`,
          status: i % 3,
          note: `备注信息${i}`
        })
      }
      
      // 应用筛选
      let filteredData = [...mockData]
      if (params.name) {
        filteredData = filteredData.filter(item => item.name.includes(params.name))
      }
      if (params.phone) {
        filteredData = filteredData.filter(item => item.phone.includes(params.phone))
      }
      if (params.source) {
        filteredData = filteredData.filter(item => item.source === params.source)
      }
      if (params.status) {
        filteredData = filteredData.filter(item => item.status == params.status)
      }
      if (params.createTime) {
        filteredData = filteredData.filter(item => item.createTime === params.createTime)
      }
      
      // 分页处理
      const start = (params.page - 1) * params.pageSize
      const end = start + params.pageSize
      const pageData = filteredData.slice(start, end)
      
      resolve({
        list: pageData,
        total: filteredData.length
      })
    }, 500)
  })
}


// 初始化
onMounted(() => {

  
});
</script>

<style scoped>
.page-container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: calc(100vh - 60px);
}

.page-title {
  margin-bottom: 20px;
  color: #303133;
  font-weight: 600;
  padding-bottom: 15px;
  border-bottom: 1px solid #ebeef5;
}
</style>